<template>
  <view class="">
    <view v-for="(v1, k1) in list" :key="v1.id" class="bg-white p-12 mb-12">
      <view class="title-bar flex items-center">
        <view class="">{{ v1.title }}</view>
        <view class="title-bar-desc">{{ v1.remark }}</view>
      </view>
      <template v-if="v1.type === 3">
        <scroll-view class="" scroll-x>
          <view class="flex">
            <view v-for="v2 in v1.children" :key="v2.id" class="rank-panal">
              <view class="rank-header">
                <view class="rank-title">{{ v2.title }}</view>
                <view class="rank-more">
                  <text class="iconfont icon-gengduo" />
                </view>
              </view>
              <view class="">
                <view v-for="(v3, k3) in v2.list" :key="v3.id" class="rank-goods flex items-center" @click="goGoods(v3.id)">
                  <image class="rank-icon" :src="rankIcons[0]" mode="" />
                  <image class="rank-goodsImg" :src="v3.logo" mode="" />
                  <view class="flex-1 leading-18">
                    <view class="text-13 ellipsis-2">{{ v3.name }}</view>
                    <view class="text-yellow mt-2"><text class="text-12">￥</text>{{ v3.price }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </template>
      <template v-else>
        <scroll-view class="cate-tabs" scroll-x>
          <view class="flex">
            <view v-for="(v2, k2) in v1.children" :key="v2.id" class="subCate" :class="v2.id === v1.active ? 'subCate-active' : ''" @click="tabChange(k1, k2)">
              {{ v2.title }}
            </view>
          </view>
        </scroll-view>
        <view v-if="v1.type === 1" class="">
          <view v-for="v2 in v1.children" v-show="v1.active === v2.id" :key="v2.id" class="goodsList">
            <view v-for="v3 in v2.list" :key="v3.id" class="goodsItem" @click="goGoods(v3.id)">
              <image class="goodsImg" :src="v3.logo" mode="" />
              <view class="py-8 text-13 ellipsis-2">{{ v3.name }}</view>
              <view class="text-yellow"><text class="text-12">￥</text><text class="text-15">{{ v3.price }}</text></view>
            </view>
          </view>
        </view>
        <view v-else-if="v1.type === 2" class="">
          <view v-for="v2 in v1.children" v-show="v1.active === v2.id" :key="v2.id" class="fileList">
            <view v-for="v3 in v2.list" :key="v3.id" class="fileItem" @click="goGoods(v3.id)">
              <image class="fileImg" :src="v3.logo" mode="" />
              <view class="flexMain">
                <view class="text-13 ellipsis-2">{{ v3.name }}</view>
                <view class="fileCount">
                  <text class="iconfont icon-file" />
                  <text class="">共计{{ v3.file_num }}份文档</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>
<script>
import rankIcon1 from '@/static/img/ranking-1.png'
import rankIcon2 from '@/static/img/ranking-2.png'
import rankIcon3 from '@/static/img/ranking-3.png'
const rankIcons = [rankIcon1, rankIcon2, rankIcon3]
export default {
  props: ['goodsCateId'],
  data() {
    return {
      rankIcons,
      list: []
    }
  },
  watch: {
    goodsCateId: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.getList(newVal)
        }
      },
      immediate: true, // 立即执行，默认为false
      deep: true // 深度监听，默认为false
    }
  },
  methods: {
    getList(cateId) {
      this.$f.post('app/indexGoods', { cateId }).then(res => {
        this.list = res.data
      })
    },
    goGoods(id) {
      this.$Router.push('/pages/detail/goods?id=' + id)
    },
    tabChange(k1, k2) {
      const row = this.list[k1]
      const cateId = this.list[k1].children[k2].id
      this.$f.post('app/uniIndexGoods', { cateId, num: row.num }).then(res => {
        this.$set(this.list[k1].children[k2], 'list', res.data)
        this.$set(this.list[k1], 'active', cateId)
      })
    }
  }
}
</script>

<style lang="scss">
.title-bar-desc {
	color: #8493A6;
	font-size: 26rpx;
	font-weight: normal;
	margin-left: 20rpx;
}
.subCate {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	height: 60rpx;
	padding: 0 40rpx;
	margin-right: 24rpx;
	border-radius: 30rpx;
	color: #8493A6;
	background-color: #F5F7FB;
}
.subCate-active {
	color: #fff;
	background-color: $uni-primary;
}
.cate-tabs {
	margin-top: 10rpx;
	margin-bottom: 10rpx;
}
.rank-panal {
	width: 540rpx;
	flex-shrink: 0;
	margin-right: 20rpx;
	border-radius: 12rpx;
	background-color: #FDF7F7;
	overflow: hidden;
}
.rank-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding: 0 30rpx;
	background-color: #FFE9D5;
}
.rank-title {
	font-size: 40rpx;
	font-weight: bold;
	color: $uni-error;
	letter-spacing: 2px;
}
.rank-more {
	width: 44rpx;
	height: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #fff;
	.iconfont {
		color: #FFE9D5;
	}
}
.rank-goods {
	padding: 12rpx 20rpx;
	.rank-icon {
		display: block;
		width: 48rpx;
		height: 48rpx;
	}
	.rank-goodsImg {
		display: block;
		width: 160rpx;
		height: 112rpx;
		margin-left: 16rpx;
		margin-right: 8rpx;
		border-radius: 6rpx;
	}
}
.goodsList {
	display: flex;
	flex-wrap: wrap;
	margin-left: -10rpx;
	margin-right: -10rpx;
}
.goodsItem {
	width: 50%;
	padding: 14rpx 10rpx;
	box-sizing: border-box;
}
.goodsImg {
	display: block;
	width: 100%;
	height: 188rpx;
	border-radius: 8rpx;
}
.fileItem {
	display: flex;
	padding: 14rpx 0;
}
.flexMain {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 140rpx;
}
.fileImg {
	display: block;
	width: 180rpx;
	height: 140rpx;
	border-radius: 8rpx;
	margin-right: 16rpx;
}
.fileCount {
	height: 44rpx;
	line-height: 44rpx;
	border-radius: 22rpx;
	min-width: 200rpx;
	padding: 0 20rpx;
	color: #8493A6;
	font-size: 24rpx;
	background-color: #F5F7FB;
	.iconfont {
		font-size: 24rpx;
		margin-right: 8rpx;
	}
}
</style>

<style>
</style>
